<template>
    <div style="width:100%;">
        <div style="padding: 50px">
            <el-form :inline="true" :model="form_search" class="demo-form-inline" style="display: flex;height: 30px">
                <el-form-item>
                    <el-select v-model="form_search.search_type" placeholder="搜索条件" size="mini" style="width: 100px">
                        <el-option label="姓名" value='1'></el-option>
                        <el-option label="床号" value='2'></el-option>
                        <el-option label="房间号" value='3'></el-option>
                        <el-option label="楼层号" value='4'></el-option>
                        <el-option label="楼栋号" value='5'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form_search.person_name" size="mini" style="width: 100px"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="search_customer_loving(1)" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
            <el-divider></el-divider>

            <!--            -->
            <!--            -->
            <!--            以下是老人个人喜好信息列表的展示-->
            <!--            -->
            <!--            -->
            <template>
                <el-table
                        :data="customer_loving_list"
                        style="width: 100%"
                        highlight-current-row
                        size="mini"
                >
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="100px"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="客户姓名"
                            width="80px"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="gender"
                            label="性别"
                            width="50px">
                    </el-table-column>
                    <el-table-column
                            prop="age"
                            label="年龄"
                            width="50px">
                    </el-table-column>
                    <el-table-column
                            prop="loving"
                            label="平时喜好"
                            width="250px">
                    </el-table-column>
                    <el-table-column
                            prop="disease"
                            label="身体疾病"
                            width="200px">
                    </el-table-column>
                    <el-table-column
                            prop="suggest"
                            label="饮食建议"
                            min-width="100px">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button @click="handle_change_loving_dialog_open(scope.row)" type="text" size="small">
                                编辑详情
                            </el-button>
                            <el-button @click="handle_food_choosing_dialog_open(scope.row)" type="text" size="small">
                                设置食品
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>


            <!--            -->
            <!--            -->
            <!--        以下是编辑喜好的dialog界面-->
            <!--            -->
            <!--            -->
            <el-dialog ref="change_loving_dialog"
                       title="编辑详情"
                       :visible.sync="change_loving_dialog_visible"
                       width="30%"
                       style="min-width: 600px"
            >
            <span>
                <el-divider></el-divider>
                <el-form ref="change_loving_dialog_form"
                         :model="change_loving_dialog_data"
                         label-width="120px"
                         size="mini"
                         :rules="change_loving_dialog_rules">
                    <el-form-item label="客户姓名:" prop="name">
                        <el-input v-model="change_loving_dialog_data.name" placeholder="请输入【客户姓名】信息"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="平时喜好:" prop="loving">
                        <el-input v-model="change_loving_dialog_data.loving" placeholder="请输入【平时喜好】信息"></el-input>
                    </el-form-item>
                    <el-form-item label="身体疾病:" prop="disease">
                        <el-input v-model="change_loving_dialog_data.disease" placeholder="请输入【身体疾病】信息"></el-input>
                    </el-form-item>
                    <el-form-item label="饮食建议:" prop="suggest">
                        <el-input v-model="change_loving_dialog_data.suggest" placeholder="请输入【饮食建议】信息"></el-input>
                    </el-form-item>
                </el-form>
                <el-divider></el-divider>
            </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="change_loving_dialog_visible=false" size="mini">取 消</el-button>
                    <el-button type="primary" @click="handle_change_loving_dialog_submit('change_loving_dialog_form')"
                               size="mini">确 定</el-button>
                </span>
            </el-dialog>

            <!--            -->
            <!--            -->
            <!--        以下是为老人分配食品的dialog界面-->
            <!--            -->
            <!--            -->
            <el-dialog ref="food_distribute_dialog"
                       title="设置食品"
                       :visible.sync="food_distribute_dialog_visible"
                       width="60%"
                       style="min-width: 600px;"
            >
            <span>
                <el-divider></el-divider>

                <el-form ref="food_distribute_dialog_search_form"
                         :model="food_distribute_dialog_search_detail"
                         label-width="120px"
                         size="mini"
                         :rules="food_distribute_dialog_search_rules"
                         :inline="true"
                         style="float: left;">

                    <el-form-item label="客户姓名:" prop="name">
                        <el-input v-model="food_distribute_dialog_search_detail.name" placeholder="请输入【客户姓名】信息"
                                  :disabled="true" style="width: 100px"></el-input>
                    </el-form-item>
                    <el-form-item prop="search_day">
                        <el-select v-model="food_distribute_dialog_search_detail.search_day"
                                   placeholder="日期" size="mini" style="width: 100px">
                            <el-option label="周一" value="周一"></el-option>
                            <el-option label="周二" value="周二"></el-option>
                            <el-option label="周三" value="周三"></el-option>
                            <el-option label="周四" value="周四"></el-option>
                            <el-option label="周五" value="周五"></el-option>
                            <el-option label="周六" value="周六"></el-option>
                            <el-option label="周七" value="周七"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="search_meal_time">
                        <el-select v-model="food_distribute_dialog_search_detail.search_meal_time"
                                   placeholder="餐次" size="mini" style="width: 100px">
                            <el-option label="早餐" value="早餐"></el-option>
                            <el-option label="午餐" value="午餐"></el-option>
                            <el-option label="晚餐" value="晚餐"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search_food_calendar('food_distribute_dialog_search_form')"
                                   size="mini">查询</el-button>
                    </el-form-item>
                </el-form>
                <template>
                <el-form ref="food_distribute_dialog_choose_form"
                         label-width="120px"
                         size="mini"
                         :inline="false"
                         style="margin-top: 80px;"
                >
                    <template v-for="list in food_calendar">
                        <el-form-item :label="list.type+'： '">
                            <el-checkbox-group v-model="chosen_food" style="float:left;">
                                <template v-for="food in list.list">
                                    <el-checkbox :label="food.name+'（'+food.tag+'）'">
                                    </el-checkbox>
                                </template>
                            </el-checkbox-group>
                        </el-form-item>
                    </template>
                </el-form>
                    </template>
            </span>


                <span slot="footer" class="dialog-footer">
                    <el-divider></el-divider>
                    <el-button @click="food_distribute_dialog_visible=false" size="mini">取 消</el-button>
                    <el-button type="primary"
                               @click="handle_food_distribute_dialog_submit('food_distribute_dialog_choose_form')"
                               size="mini">确 定</el-button>
                </span>


            </el-dialog>
            <el-row style="float: right;margin: 0">
                <label>当前为第{{page_select.current_page}}页，共计{{page_select.total_page}}页</label>
                <el-form :inline="true">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-arrow-left" @click="decrease_page()" size="mini">上一页</el-button>
                        <el-button type="primary" @click="increase_page()" size="mini">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                        <el-input type="primary" placeholder="请输入页码" style="max-width: 120px" size="mini"
                                  v-model="page_select.page_input"
                        ></el-input>
                        <el-button type="primary" @click="change_page()" size="mini">Go!</el-button>


                    </el-form-item>


                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
    import qs from 'qs'
    import axios from 'axios'

    export default {
        name: "fooddistribute",
        mounted(){
          this.search_customer_loving(1);
        },

        data() {
            return {
                form_search: {
                    person_name: '',
                    search_type: '1',
                },
                page_select: {
                    current_page: 1,
                    total_page: 1,
                    page_input: '',
                },

                customer_loving_list: [],
                change_loving_dialog_visible: false,
                change_loving_dialog_data: {
                    id: null,
                    name: '',
                    loving: '',
                    disease: '',
                    suggest: '',
                },
                change_loving_dialog_rules: {
                    name: [{required: false, message: '请输入客户姓名', trigger: 'blur'}],
                    loving: [{required: true, message: '请输入平时喜好', trigger: 'blur'}],
                    disease: [{required: false, message: '请输入身体疾病', trigger: 'blur'}],
                    suggest: [{required: true, message: '请输入饮食建议', trigger: 'blur'}],
                },
                food_distribute_dialog_visible: false,
                food_distribute_dialog_search_detail: {
                    name: '',
                    id: '',
                    search_day: '',
                    search_meal_time: '',
                },
                food_distribute_dialog_search_rules: {
                    search_day: [{required: true, message: '请选择日期', trigger: 'blur'}],
                    search_meal_time: [{required: true, message: '请选择餐次', trigger: 'blur'}],
                },
                food_calendar: [
                ],
                chosen_food: [],
            }
        },
        methods: {
            search_customer_loving(page) {
                if (this.$data.form_search.search_type === null) {
                    this.$message({
                        type: 'warning',
                        message: '请选择搜索类型!',
                    });
                } else {
                    let obj = {
                        'search_key': this.$data.form_search.person_name,
                        'page': page,
                    };
                    let _url = '/api/food_distribute_page/';
                    switch (this.$data.form_search.search_type) {
                        default:
                        case '1':
                            _url += 'search_customer_by_name';
                            break;
                        case '2':
                            _url += 'search_customer_by_bed_number';
                            break;
                        case '3':
                            _url += 'search_customer_by_room_number';
                            break;
                        case '4':
                            _url += 'search_customer_by_floor_number';
                            break;
                        case '5':
                            _url += 'search_customer_by_building_number';
                            break;
                    }
                    axios({
                        method: 'post',
                        url: _url,
                        data: qs.stringify(obj),
                    }).then(res => {
                        if (res.data.rs === true) {
                            this.$data.customer_loving_list = res.data.data.customer_loving_list;
                            this.$data.page_select.total_page = res.data.data.total_page;
                        } else {
                            this.$message({
                                type: 'error',
                                message: '搜索失败：' + res.data.errMsg,
                            });
                        }
                    });
                }
            },
            handle_change_loving_dialog_submit(form_name) {
                this.$refs[form_name].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否确认修改?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            let obj = {
                                'id': this.$data.change_loving_dialog_data.id,
                                'loving': this.$data.change_loving_dialog_data.loving,
                                'disease': this.$data.change_loving_dialog_data.disease,
                                'suggest': this.$data.change_loving_dialog_data.suggest,
                            };
                            axios({
                                method: 'post',
                                url: '/api/food_distribute_page/change_loving',
                                data: qs.stringify(obj),
                            }).then(res => {
                                if (res.data.rs === true) {
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功!',
                                    });
                                    this.$data.change_loving_dialog_visible = false;
                                    this.search_customer_loving(this.$data.page_select.current_page);
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: '修改失败：' + res.data.errMsg,
                                    });
                                }
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                            });
                        });
                    } else {
                        return false;
                    }
                });
            },
            search_food_calendar(form_name) {
                this.$refs[form_name].validate((valid) => {
                    if (valid) {
                        let obj = {
                            'day': this.$data.food_distribute_dialog_search_detail.search_day,
                            'time': this.$data.food_distribute_dialog_search_detail.search_meal_time,
                            'id':this.$data.food_distribute_dialog_search_detail.id,
                        };

                        axios({
                            method: 'post',
                            url: '/api/food_distribute_page/search_calendar',
                            data: qs.stringify(obj),
                        }).then(res => {
                            if (res.data.rs === true) {
                                this.$data.food_calendar=res.data.data.food_calendar;
                                this.convert_food_calendar_to_chosen_food();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '获取食品列表失败：' + res.data.errMsg,
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            convert_food_calendar_to_chosen_food: function () {
                for (let i = 0; i < this.$data.food_calendar.length; i++) {
                    for (let j = 0; j < this.$data.food_calendar[i].list.length; j++) {
                        let obj = this.$data.food_calendar[i].list[j];
                        let _str = obj.name + "（" + obj.tag + "）";
                        if (obj.chosen === true) {
                            this.$data.chosen_food.push(_str);
                        }
                    }
                }
            },
            convert_chosen_food_to_id() {
                let str = '';
                for (let k = 0; k < this.$data.chosen_food.length; k++) {
                    for (let i = 0; i < this.$data.food_calendar.length; i++) {
                        for (let j = 0; j < this.$data.food_calendar[i].list.length; j++) {
                            let obj = this.$data.food_calendar[i].list[j];
                            let _str = obj.name + "（" + obj.tag + "）";
                            if (this.$data.chosen_food[k] === _str) {
                                str += obj.id + ".";
                            }
                        }
                    }
                }
                return str;
            },
            handle_food_distribute_dialog_submit(form_name) {
                this.$confirm('是否确认修改?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let obj = {
                        'cid': this.$data.food_distribute_dialog_search_detail.id,
                        'fid': this.convert_chosen_food_to_id(),
                        'day': this.$data.food_distribute_dialog_search_detail.search_day,
                        'time': this.$data.food_distribute_dialog_search_detail.search_meal_time,
                    };
                    axios({
                        method: 'post',
                        url: '/api/food_distribute_page/distribute_food',
                        data: qs.stringify(obj),
                    }).then(res => {
                        if (res.data.rs === true) {
                            this.$message({
                                type: 'success',
                                message: '修改食品分配成功！',
                            });
                            this.$data.food_distribute_dialog_visible = false;
                        } else {
                            this.$message({
                                type: 'error',
                                message: '修改食品分配失败：' + res.data.errMsg,
                            });
                        }
                    });
                });
        },
        handle_change_loving_dialog_open(row) {
            this.$data.change_loving_dialog_visible = true;
            this.$data.change_loving_dialog_data.id = row.id;
            this.$data.change_loving_dialog_data.name = row.name;
            this.$data.change_loving_dialog_data.loving = row.loving;
            this.$data.change_loving_dialog_data.disease = row.disease;
            this.$data.change_loving_dialog_data.suggest = row.suggest;

        },
        handle_food_choosing_dialog_open(row) {
            this.$data.food_distribute_dialog_visible = true;
            this.$data.food_distribute_dialog_search_detail.name = row.name;
            this.$data.food_distribute_dialog_search_detail.id = row.id;
            this.$data.chosen_food=[];
            this.$data.food_calendar=[];
        },
        change_page() {
            let num = parseInt(this.$data.page_select.page_input);
            if (isNaN(num)) {
                alert("请输入正确的数字！");
                this.$data.page_select.page_input = '';
            } else if (num <= 0) {
                alert("请输入正整数！");
                this.$data.page_select.page_input = '';
            } else {
                this.$data.page_select.current_page = num;
                this.search_customer_loving(this.$data.page_select.current_page);
            }
        },
        increase_page() {
            this.$data.page_select.current_page++;
            this.search_customer_loving(this.$data.page_select.current_page)
        },
        decrease_page() {
            if (this.$data.page_select.current_page > 1) {
                this.$data.page_select.current_page--;
            }
            this.search_customer_loving(this.$data.page_select.current_page);
        },
    }
    ,
    }
</script>

<style scoped>

</style>